<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title>排行榜</title>
		
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
		
		<style>
			.user{
				width:30px;
				height:30px;
				border-radius: 50%;
				border: #000000 1px solid;
			}
		</style>
	</head>
	<body>

		<!--导航栏开始-->
		<iframe th:src="@{/navigation/navigationBar.html}"
				frameBorder="0" width="100%" scrolling="no" height="70px"></iframe>
		<!--导航栏结束-->
		
		<!--排行榜开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<!--选项卡-->
						<div class="card text-left">
						  <div class="card-header">
						    <ul class="nav nav-tabs card-header-tabs">
						      <li class="nav-item">
						        <a class="nav-link " href="#">入站必看</a>
						      </li>
						      <li class="nav-item">
						        <a class="nav-link" href="#">综合热门</a>
						      </li>
						      <li class="nav-item">
						        <a class="nav-link active" href="#">排行榜</a>
						      </li>
						    </ul>
						  </div>
						  <div class="card-body">
							  <div class="container">
							  	<div class="row">
									<div class="card ">
										<div class="card-body ">
											<a th:href="@{/findAllVideo2}" class="badge badge-pill badge-info">全部</a>
											<a th:href="@{/findAllFan2}" class="badge badge-pill badge-info">番剧</a>
											<a href="#" class="badge badge-pill badge-info">国创</a>
											<a href="#" class="badge badge-pill badge-info">纪录片</a>
											<a th:href="@{/findByClassification/1}" class="badge badge-pill badge-info">动画-1</a>
											<a th:href="@{/findByClassification/2}" class="badge badge-pill badge-info">音乐-2</a>
											<a th:href="@{/findByClassification/3}" class="badge badge-pill badge-info">舞蹈-3</a>
											<a th:href="@{/findByClassification/8}" class="badge badge-pill badge-info">游戏-8</a>
											<a href="#" class="badge badge-pill badge-info">知识</a>
											<a href="#" class="badge badge-pill badge-info">数码</a>
											<a th:href="@{/findByClassification/5}" class="badge badge-pill badge-info">生活-5</a>
											<a th:href="@{/findByClassification/11}" class="badge badge-pill badge-info">美食-11</a>
											<a href="#" class="badge badge-pill badge-info">鬼畜</a>
											<a href="#" class="badge badge-pill badge-info">时尚</a>
											<a href="#" class="badge badge-pill badge-info">娱乐</a>
											<a href="#" class="badge badge-pill badge-info">影视</a>
											<a href="#" class="badge badge-pill badge-info">电影</a>
											<a href="#" class="badge badge-pill badge-info">生活</a>
											<a href="#" class="badge badge-pill badge-info">电视剧</a>
											<a href="#" class="badge badge-pill badge-info">原创</a>
											<a href="#" class="badge badge-pill badge-info">真人</a>
										</div>
									</div>
							  	</div>
							  </div>
							  <hr />
							  
							  <!--媒体对象组开始-->
							  <div class="container" id="rank">
								  <span th:if="${video=='true'}">
									  <span th:each="video,in:${allVideo}">
										  <div class="row">
											<div class="col-1 text-center mt-auto">
												<h4 th:text="${in.count}"></h4>
											</div>
											<div class="col">
												<div class="media mt-4">
												  <img th:src="@{/vimg/}+${video.vid}+@{.png}" class="mr-3" alt="...">
												  <div class="media-body">
													<a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><h5 class="mt-0" th:text="${video.vname}"></h5></a>
													<small class="text-muted">总播放：:[[${video.totalamount}]] | 评论：[[${video.barrage}]]</small>
													<a th:href="@{/findUserById/}+${video.creator}">
														<small class="text-muted">[[${video.nickname}]]</small>
													</a>
												  </div>
												</div>
											</div>
										  </div>
									  </span>
								  </span>
								  <span th:unless="${video=='true'}">
									  <span th:each="fan,in:${allFan}">
										  <div class="row">
											<div class="col-1 text-center mt-auto">
												<h4 th:text="${in.count}"></h4>
											</div>
											<div class="col">
												<div class="media mt-4">
												  <img th:src="@{/s_img/}+${fan.fid}+@{.png}" style="height:120px;width:90px" class="mr-3" alt="...">
												  <div class="media-body">
													<a th:href="@{/findFanByFname/}+${fan.fid}+@{/true}"><h5 class="mt-0" th:text="${fan.fname}"></h5></a>
													  <small class="text-muted">全[[${fan.episodes}]]话</small><br>
													  <small class="text-muted">总播放：:[[${fan.totalamount}]] | 评论：[[${fan.barrage}]] | 追番：[[${fan.fans}]]</small>
												  </div>
												</div>
											</div>
										  </div>
									  </span>
								  </span>
							  </div>
							 <!--媒体对象组结束-->

						    	
						    </div>
						  </div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!--排行榜结束-->
		
		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/bootstrap.bundle.js}"></script>
		
		<script>
		    $(function(){
		       $("#rank").children('.row').hover(function(){
		           $(this).css('background','#aaa');
		       }, function(){
		           $(this).css('background', '#FFF');
		       });
		    });
		</script>
	</body>
</html>
